import React from 'react';
import '../assets/css/Test02.scss'

class Test02 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 100,
            autoChanging: false
        };

        setInterval(() => {
            this.down();
            this.setState({autoChanging: false});
        }, 100);
    }

    render() {
        return (
            <div style={{margin: '100px'}}>
                <progress
                    className={this.levelInfo(this.state.count)}
                    value={this.state.count}
                    max="100"
                >{this.state.count}%</progress>
                <button onClick={() => this.count()}>Click Me</button>
            </div>
        )
    }

    count() {
        let count = this.state.count;
        if (count < 100) {
            this.setState({count: count + 10, autoChanging: true});
        }
    }

    down() {
        let count = this.state.count;
        let changeFlag = this.state.autoChanging;
        if (count > 0 && !changeFlag) {
            this.setState({count: count - 1})
        }
    }


    /**
     * 进度条根据不同的进度，变换不同的颜色
     */
    levelInfo(level) {
        if (level < 15) {
            return "is-primary";
        } else if (level >= 15 && level < 60) {
            return "is-success";
        } else if (level >= 60 && level < 97) {
            return "is-warning";
        } else {
            return "is-danger";
        }
    }
}


export default Test02;